<template>
  <CardModules title="关注列表">
    <template v-slot:head-button>
      <div class="button-list">
        <div class="button-item" @click="eventHistory"><ProjectFilled />历史</div>
      </div>
    </template>
    <div class="follow-content">
      <div class="follow-table" v-if="tableData.length > 0">
        <div class="follow-head" :style="`width: ${getTotalWidth(tableOptions)}px`">
          <div class="head-col" style="width: 40px"></div>
          <div class="head-col" v-for="(item, index) in tableOptions" :key="index" :style="`width: ${item.width}px`">{{ item.name }}</div>
        </div>
        <div class="follow-body" :style="`width: ${getTotalWidth(tableOptions)}px`">
          <div class="body-content">
            <div class="body-row" v-for="(row, rIndex) in tableData" :keY="rIndex" @click="rowSelect(row)">
              <div class="row-item" style="width: 40px; text-align: center">
                <StarFilled class="row-icon" :class="{ 'row-active': !row.endTime }" />
              </div>
              <div class="row-item" v-for="(item, index) in tableOptions" :key="index" :style="`width: ${item.width}px`">
                <div v-if="item.format">{{ item.format(row) }}</div>
                <div v-else>{{ row[item.prop] }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="no-data" v-else>暂无数据</div>
    </div>
  </CardModules>
</template>
<script setup>
  import CardModules from '/@/components/cardModules/index.vue';
  import { ref, onMounted } from 'vue';
  import { api } from '/@/api/plat/event.js';
  import { formatTime, dateFormat } from '/@/utils/date.js';
  import { message } from 'ant-design-vue';
  const emit = defineEmits(['rowSelect', 'eventHistory', 'flickerArea']);

  const tableOptions = [
    {
      name: '策略',
      prop: 'policyName',
      width: 100,
    },
    {
      name: '区域',
      prop: 'areaName',
      width: 150,
    },
    {
      name: '目标',
      prop: 'targetId',
      width: 100,
    },
    {
      name: '触发时间',
      prop: 'startTime',
      width: 150,
      format: (row) => {
        if (!row.startTime) {
          return '';
        } else {
          return dateFormat(row.startTime);
        }
      },
    },
    {
      name: '时长',
      prop: 'timeLength',
      width: 100,
      format: (row) => {
        if (!row.endTime) {
          return '';
        } else {
          const time = Math.floor((+new Date(row.endTime) - +new Date(row.startTime)) / 1000);
          return formatTime(time);
        }
      },
    },
    {
      name: '编号',
      prop: 'eventId',
      width: 100,
    },
  ];
  const tableData = ref([]);

  function onload() {
    api
      .queryPage({
        pages: 1,
        size: 30,
        eventType: '0',
        startTime: dateFormat(new Date(), 'yyyy-MM-dd ' + '00:00:00'),
        endTime: dateFormat(new Date(), 'yyyy-MM-dd ' + '23:59:59'),
      })
      .then(({ data }) => {
        const { records } = data;
        tableData.value = records;
        // 事件初始化的时候，判断是否需要闪烁
        let list = [];
        for (let item of records) {
          if (!item.endTime) {
            item.state = '0';
            list.push(item);
          }
        }
        emit('flickerArea', list, '0');
      });
  }

  function getTotalWidth(options) {
    let number = 0;
    options.forEach((item) => {
      number += item.width;
    });
    return number;
  }

  function getDataByMqtt(row) {
    tableData.value.unshift(row);
  }

  function deleteDataByMqtt(eventId) {
    const index = tableData.value.findIndex((m) => eventId === m.eventId);
    if (index >= 0) {
      tableData.value.splice(index, 1);
    }
  }

  // 重新请求
  function reloadDataByMqtt() {
    onload();
  }

  // 手动取消闪烁状态
  function removeDataByMqtt(list) {
    for (let row of list) {
      const index = tableData.value.findIndex((m) => row.eventId === m.eventId);
      if (index > -1) {
        const data = { ...tableData.value[index] };
        const time = Math.floor((+new Date(data.endTime) - +new Date(data.triggerTime)) / 1000);
        data.timeLength = formatTime(time);
        data.endTime = dateFormat(new Date(row.endTime));
        tableData.value[index] = data;
      }
    }
  }

  function rowSelect(row) {
    emit('rowSelect', row);
  }

  function eventHistory() {
    emit('eventHistory', '0');
  }

  onMounted(onload);

  defineExpose({
    getDataByMqtt,
    deleteDataByMqtt,
    removeDataByMqtt,
    reloadDataByMqtt,
  });
</script>

<style lang="less" scoped>
  @import './index.less';
</style>
